<template>
	<div>
		<!--头部-->
		<v-header>
		</v-header>
		<div class="top_img">
			<img src="../static/images/order_bdg.jpg" />
		</div>
		<div class="main">
			<div class="order_main">
				<div class="order_title border_bot">
					<div class="left oTit_lf">
						<label>商品订单</label>
						<label>{{allOrdersNums}}个商品</label>
					</div>
					<div class="right oTit_rg f_weight">
						<ul>
							<li @click="quanbu" v-bind:class="{line_or: isActive0}">全部</li>
							<li @click="daifu" v-bind:class="{line_or: isActive1}">待付款</li>
							<li @click="fahuo" v-bind:class="{line_or: isActive2}">待发货</li>
							<li @click="shouhuo" v-bind:class="{line_or: isActive3}">待收货</li>
							<li @click="pingjia" v-bind:class="{line_or: isActive4}">待评价</li>
						</ul>
					</div>
				</div>
				<div v-if="orders.length > 0">

					<div v-for="item in orders" class="border_bot order_wrap">
						<div class="order_wrap_tit border_bot">
							<div class="owt_lf left">
								<!--<input :checked="item.select" @click="perSelectClick(item.select)" type="checkbox">-->
								<label>订单编号：{{item.tradeNo}}</label>
							</div>
							<label class="right f_red">{{item.status}}</label>
						</div>
						<div class="order_wrap_con border_bot">
							<div class="owc_lf">
								<img :src="src+item.pic" style="width: 91px;height: 91px;" />
								<label class="owc_lf_top">{{item.goodsName}}</label>
								<label class="owc_lf_bottom">{{item.standard}}</label>
							</div>
							<div class="owc_rg right">
								<div class="owc_rg_money">
									<label>￥{{item.goodsPrice}}</label>
								</div>
								<div class="owc_rg_cen" style="width: 75px;">
									<div v-if="item.isPay === 1" class="owc_rg_cen1">线下已支付</div>
									<div class="owc_rg_cen2">抵用卷使用金额</div>
									<div class="owc_rg_cen3" style="color: #742C1D;">￥{{item.shopReward}}</div>
								</div>
								<div class="btn_or">
									<button @click="deleteBtn(item.id)" v-show="item.status === '已下单'">删除订单</button>
									<button @click="checkLogistics(item.tradeNo)" v-show="item.status === '已发货'">查看物流</button>
									<button @click="chaKanPingJia(item)" v-show="item.status === '已评论'">查看评价</button>
									<button @click="checkPingJia(item)" v-show="item.status === '已签收'">进行评价</button>
									<button @click="submitPingJia(item.goodsId, item.tradeNo, item.starsVal, item.comment, item)" v-show="item.status === '已签收'&&item.pingJiaShow">提交评价</button>
									<button @click="putOrderStatus(item.tradeNo, 4)" v-show="item.status === '已发货'">确认收货</button>
								</div>
							</div>
						</div>
						<div v-if="item.status === '已签收'" v-show="item.pingJiaShow" class="or_evaluate">
							<div class="or_eva_tit">
								<div class="or_eva_lf left">
									<label>请您对订单进行评价</label>
								</div>
								<div class="or_eva_star right">
									<div class="star">
										<el-rate v-model="item.starsVal"></el-rate>
									</div>
									<div class="result"></div>
								</div>
							</div>
							<div class="eva_box">
								<textarea v-model="item.comment" cols="30" rows="153" placeholder="请输入您对订单的评价内容！"></textarea>
							</div>
						</div>
						<div v-if="item.status === '已评论'" v-show="item.yiPingJiaShow" class="or_evaluate2">
							<div class="or_eva2 margin-top15">
								<div class="or_eva2_lf left">
									<label class="left" style="margin-right: 15px;">{{item.username}}</label>
									<div class="or_eva_star2 left" style="position: static;">
										<div class="star">
											<el-rate disabled v-model="item.starsVal"></el-rate>
										</div>
									</div>
								</div>
								<div class="or_eva2_rg right">
									<label>{{item.create_time}}</label>
								</div>
							</div>
							<div class="or_eva2_bot">
								{{item.comment}}
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<div class="empty_order">

					</div>
					<p style="text-align: center;padding-bottom: 20px;">暂时没有订单</p>
				</div>

			</div>
		</div>
		<el-dialog title="查看物流" :visible.sync="popupVisible">
			<div class="aShop_main pad030">
				<div v-for="item in wuliulist" class="new_b_row border_bot" style="line-height: 24px;">
					<div class="left" style="width: 70%;padding-right: 16px;box-sizing: border-box;">
						{{item.context}}
					</div>
					<div class="right" style="width: 30%;">
						{{item.ftime}}
					</div>
				</div>

			</div>
		</el-dialog>
		<div class="order_pagination_wrap">
			<el-pagination background @current-change="handleCurrentChange" :current-page.sync="oCurrentPage" :page-size="4" layout="prev, pager, next" :total="allOrdersNums">
			</el-pagination>
		</div>
		<!--脚部-->
		<v-footer>
		</v-footer>
	</div>
</template>
<script>
	export default {
		created() {
			var self = this
			self.isActive0 = true
			self.isActive1 = false
			self.isActive2 = false
			self.isActive3 = false
			self.isActive4 = false
			self.getData({
				page: self.oCurrentPage,
				limit: 4
			})

		},
		data() {
			return {
				orders: [],
				src: this.$src,
				isActive0: true,
				isActive1: false,
				isActive2: false,
				isActive3: false,
				isActive4: false,
				status: '',
				wuliulist: [],
				popupVisible: false,
				allOrdersNums: 0,
				oCurrentPage: 1,

			}
		},
		methods: {
			getData: function(pData) {
				var _this = this
				this.$api.get('/front/orders', pData, r => {
					console.log('订单页r', r)
					_this.orders = r.data.list
					_this.allOrdersNums = r.data.dataCount
					for(var i = 0; i < this.orders.length; i++) {
						_this.$set(this.orders[i], 'select', false)
						_this.$set(this.orders[i], 'pingJiaShow', false)
						_this.$set(this.orders[i], 'starsVal', 0)
						_this.$set(this.orders[i], 'comment', '')
						_this.$set(this.orders[i], 'yiPingJiaShow', false)

					}
					console.log('this.orders', this.orders)
				})
			},
			quanbu: function() {
				var _this = this
				this.isActive0 = true
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
				this.isActive4 = false
				_this.getData({
					page: 1,
					limit: 4
				})
			},
			daifu: function() {
				var _this = this
				this.isActive0 = false
				this.isActive1 = true
				this.isActive2 = false
				this.isActive3 = false
				this.isActive4 = false
				_this.getData({
					status: 1,
					page: 1,
					limit: 4
				})
			},
			fahuo: function() {
				var _this = this
				this.isActive0 = false
				this.isActive1 = false
				this.isActive2 = true
				this.isActive3 = false
				this.isActive4 = false
				_this.getData({
					status: 2,
					page: 1,
					limit: 4
				})
			},
			shouhuo: function() {
				var _this = this
				this.isActive0 = false
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = true
				this.isActive4 = false
				_this.getData({
					status: 3,
					page: 1,
					limit: 4
				})

			},
			pingjia: function() {
				var _this = this
				this.isActive0 = false
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
				this.isActive4 = true
				_this.getData({
					status: 4,
					page: 1,
					limit: 4
				})

			},
			putOrderStatus: function(tradeNo, status) {
				var self = this
				this.$confirm('确定收货, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.put('front/orders/received/' + tradeNo, {
						status: status
					}, r => {
						if(r.code === 200) {
							self.$message({
								type: "success",
								message: r.data
							})
						} else {
							self.$message(r.error);
							return false
						}
						self.$router.go(0)
					})

				}).catch(() => {

				});

			},
			checkLogistics: function(tradeNo) {
				var self = this
				this.$api.get('/front/orders/express', {
					tradeNo: tradeNo
				}, r => {
					console.log('查看物流r', r)
					if(r.code === 200) {
						self.wuliulist = r.data
						self.popupVisible = true
					} else {
						self.$message(r.error);
						return false
					}

				})
			},
			checkPingJia: function(ite) {
				console.log('ite1', ite)
				ite.pingJiaShow = true
				console.log('ite2', ite)
			},
			perSelectClick: 　 function(status) {
				console.log('status', status)
			},
			submitPingJia: function(gid, tradeNo, star, comment, item) {
				var _this = this
				var self = this
				this.$api.post('/front/rates', {
					gid: gid,
					star: star,
					comment: comment,
					tradeNo: tradeNo
				}, r => {
					if(r.code === 200) {
						self.$message({
							type: "success",
							message: r.data
						})
					} else {
						self.$message(r.error);
						return false
					}
					self.$router.go(0)
					_this.isActive0 = true
					_this.isActive1 = false
					_this.isActive2 = false
					_this.isActive3 = false
					_this.isActive4 = false
					_this.getData(null)
				})
			},
			chaKanPingJia: function(item) {
				var self = this
				if(item.yiPingJiaShow === false) {
					this.$api.get('/front/rates', {
						tradeNo: item.tradeNo
					}, r => {
						if(r.code === 200) {
							item.starsVal = r.data.list[0].star
							item.comment = r.data.list[0].comment
						} else {
							self.$message(r.error);
							return false
						}

					})
					item.yiPingJiaShow = true
				} else {
					item.yiPingJiaShow = false
				}
			},
			handleCurrentChange(val) {
				var self = this
				self.oCurrentPage = val
				if(self.isActive0 === true) {
					self.getData({
						page: self.oCurrentPage,
						limit: 4
					})
				} else if(self.isActive1 === true) {
					self.getData({
						status: 1,
						page: self.oCurrentPage,
						limit: 4
					})
				} else if(self.isActive2 === true) {
					self.getData({
						status: 2,
						page: self.oCurrentPage,
						limit: 4
					})
				} else if(self.isActive3 === true) {
					self.getData({
						status: 3,
						page: self.oCurrentPage,
						limit: 4
					})
				} else if(self.isActive4 === true) {
					self.getData({
						status: 4,
						page: self.oCurrentPage,
						limit: 4
					})
				} else {

				}

			},
			deleteBtn(id) {
				var self = this
				this.$confirm('删除该订单, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$api.delete('front/orders/' + id, null, r => {
						if(r.code === 200) {
							self.$message({
								type: "success",
								message: r.data
							})
							self.$router.go(0)
							
						} else {
							self.$message(r.error);
							return false
						}

					})

				}).catch(() => {

				});
			}

		},
		mounted: function() {

		},
		computed: {
			//检测是否全选
			isSelectAll: function() {
				//如果productList中每一条数据的select都为true，返回true，否则返回false;
				return this.orders.every(function(val) {
					return val.select
				});
			}
		}
	}
</script>

<style scoped>

</style>